aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms
Commit message (Collapse)AuthorAgeFilesLines
* refactor(pages): refine Article pagesArmand Philippot2023-12-011-1/+1
| | | | | | | | | | | * use rehype to update code blocks class names * fix widget heading level (after a level 1 it should always be a level 2 and not 3) * replace Spinner with LoadingPage and LoadingPageComments components to keep layout coherent * refactor useArticle and useComments hooks * fix URLs in JSON LD schema * add Cypress tests
* refactor(pages): improve HomepageArmand Philippot2023-11-291-0/+2
| | | | | | | | | * move custom homepage components that does not require props to the MDX file (links should not need to be translated here but where they are defined) * move SEO title and meta desc to MDX file * make Page component the wrapper instead of using a React fragment * fix MDX module types
* refactor(components): integrate sectioned page template into PageArmand Philippot2023-11-234-133/+17
| | | | | | | | * replace Section component by a generic one (other components should be able to use it) * add a PageSection component * add `hasSections` prop to Page component * remove sectioned-page template
* refactor(components,pages): extract MDX components mapping from pagesArmand Philippot2023-11-223-8/+8
| | | | | | | Instead of repeating the overriding on each pages, we should define it in one place and reuse it in pages. By default it is not possible to override native HTML tags with MDX so I added a plugin in next config to allow it.
* fix: generate an id for each headings in the page main contentsArmand Philippot2023-11-181-1/+1
| | | | | | | | | | | | | | | | | | | | Since #be4d907 the ids was no longer addded to headings in useHeadingsTree hook. It was a bad practice to manipulate the DOM that way. However, I did not move the implementation elsewhere... To fix this, I now use rehype-slug on both markdown contents and html string coming from WordPress. I'm not sure the dynamic imports are really useful here since the table of contents is on almost all pages but Jest was failing with regular import because of ESM. It is the only thing that makes the tests functional again so... However if we want to test the `updateContentTree` function, Jest fails for the same reason. So I decided to not test this function. I've already spend too much time on this issue. Another problem: the ToC on projects page. Currently we use the ref on the body but the page contents are imported dynamically so the hook is executed before the contents are loaded. It makes the ToC empty... We should refactor the pages so we can use the ref directly on the imported contents.
* refactor(hooks): remove useSettings hookArmand Philippot2023-11-152-5/+5
| | | | | | | It does not make sense to re-export an existing object through a hook. On some pages both the hook and the object was imported... It is better to use the CONFIG (previously settings) object directly and by doing it we avoid potential errors because of conditional hooks.
* refactor(components): replace Toolbar with Navbar componentArmand Philippot2023-11-113-38/+69
| | | | | | | | * remove SearchModal and SettingsModal components * add a generic NavbarItem component (instead of the previous toolbar items to avoid unreadable styles...) * move FlippingLabel component logic into NavbarItem since it is only used here
* feat(components): add an Overlay componentArmand Philippot2023-11-116-0/+151
| | | | | | | | * add useScrollbarWidth hook * add useScrollLock hook * add a new component to lock scroll with an overlay (it can be useful especially on small screens to prevent background contents to be scrolled)
* refactor(components): rewrite Modal componentArmand Philippot2023-11-116-202/+0
| | | | | * add an optional close button * add an icon prop
* refactor(components): rewrite Pagination componentArmand Philippot2023-11-111-0/+17
|
* refactor(components): rewrite Copyright componentArmand Philippot2023-11-116-183/+11
| | | | | | | | | * remove `icon` prop (it is confusing because a copyright should have the copyright symbol, the license is not part of the copyright) * reorganize copyright informations I also updated the CC BY SA icon because the elements was in the wrong order.
* refactor(components): rewrite NavList componentArmand Philippot2023-11-112-14/+36
| | | | | | | * extract NavItem from NavList * remove `kind` and `listClassName` props (since the consumer has control over NavList, NavItem and NavLink components these props are obsolete)
* feat(components): add a generic Grid componentArmand Philippot2023-11-111-7/+5
| | | | | * merge Columns, Gallery and CardsList into Grid component * add more options to control the grid
* refactor(components): rewrite Card componentArmand Philippot2023-11-111-1/+1
| | | | | | | | | | | | | * make the component more generic * merge `<Summary />` and `<Comment />` styles into card component to avoid repeating the same structure * remove most of the props to use composition However the CSS is a bit complex because of the two variants... Also, the component should be refactored when the CSS pseudo-class `:has` has enough support: the provider and the `cover` and `meta` props should be removed.
* refactor(components): rewrite Code component and usePrism hookArmand Philippot2023-11-111-3/+1
| | | | | | | | | | | | * move Prism styles to Sass placeholders to avoid repeats * let usePrism consumer define its plugins (remove default ones) * remove `plugins` prop from Code component * add new props to Code component to let consumer configure plugins (and handle plugin list from the given options) However there are some problems with Prism plugins: line-highlight and treeview does not seems to be loaded. I don't want to use Babel instead of SWC so I have no solution for now.
* feat(components): add a Time componentArmand Philippot2023-11-116-23/+225
| | | | | | Instead of using helpers functions to format the date each time we need to use a time element, it makes more sense to create a new component dedicated to this task.
* refactor(components): replace ResponsiveImage with Figure componentArmand Philippot2023-11-116-0/+210
| | | | | | | | The styles applied to ResponsiveImage are related to the figure and figcaption elements. Those elements could be use with other contents than images. So I extracted them in a Figure component. The ResponsiveImage component is no longer useful: the consumer should use the Image component from `next` and wrap it in a link if needed.
* feat(components): add a generic Flip componentArmand Philippot2023-11-117-0/+270
| | | | | | The flipping animation is used at several places so it makes sense to use a single component to handle the animation. It will avoid styles duplication.
* refactor(components): make form components compliant with Eslint rulesArmand Philippot2023-11-1126-120/+99
|
* feat(components): add a Help icon shapeArmand Philippot2023-11-117-1/+45
|
* feat(components): add a VisuallyHidden componentArmand Philippot2023-11-117-2/+98
|
* refactor(components): rewrite SocialLink componentArmand Philippot2023-11-117-97/+143
| | | | | * replace default label with a label prop * rename name prop to icon prop
* refactor(components): rewrite SharingLink componentArmand Philippot2023-11-118-253/+241
| | | | | * replace default label with label prop * simplify CSS rules
* refactor(components): rewrite Link componentArmand Philippot2023-11-1113-474/+249
| | | | | | | | | * rename `external` prop to `isExternal` * rename `download` prop to `isDownload` * rewrite CSS to reduce code length and complexity * move link styles in Sass placeholders to avoid repeats because of WordPress articles * move NavLink component to molecules
* refactor(components): rewrite Notice componentArmand Philippot2023-11-118-38/+65
| | | | * Rename message prop to children prop and set ReactNode as type
* refactor(components): remove Column and NoScript from atomsArmand Philippot2023-11-1112-177/+6
| | | | | | | * Column is a simple div meant to be used inside Columns component so they should live together. * NoScript is only used in Layout component and its name does not make sense since it needs to be used inside a `noscript` element.
* refactor(components): rewrite DescriptionList componentArmand Philippot2023-11-1117-531/+437
| | | | | | | | | | | | | * add a `spacing` prop * replace `layout` prop with `isInline` prop * remove `items` prop (and classNames props) in favor of new components: Description, Group, Term * remove `withSeparator` prop (CSS content is announced by screen readers and Firefox/Safari have no support for alternative text so the consumer should add itself an element with `aria-hidden` if it need a separator) Be aware, Meta component and its consumers can be visually broken, they should be refactored before using them in production.
* refactor(components): rewrite List componentArmand Philippot2023-11-1112-257/+511
| | | | | | | | | * change `items` prop to children * replace `kind` prop with `isHierarchical`, `isOrdered` & `isInline` props * add `hideMarker` prop * add `spacing` prop to control item spacing * move lists styles to Sass placeholders to avoid repeats because of headless WordPress
* refactor(components): rewrite ProgressBar componentArmand Philippot2023-11-119-150/+240
| | | | | | | * Avoid browser vendors by adding an extra div * Add a loading state * Add an option to center the progress bar (no longer the default) * Remove min since it is always 0
* refactor(components): rewrite Spinner componentArmand Philippot2023-10-249-110/+173
| | | | | | | * Message should be set as children * Default message is no longer available (depending on use case, the consumer might prefer aria-label instead) * It is now possible to define the message position
* refactor(components): make Logo component ESlint compliantArmand Philippot2023-10-247-58/+63
| | | | | I also renamed the title prop to heading because title already exists as HTML attribute.
* feat(components): replace icons with a generic Icon componentArmand Philippot2023-10-2498-1921/+1381
| | | | | Sizes are also predefined and can be set using the `size` prop, so the consumers should no longer adjust the size in CSS.
* feat(components): add Article, Aside, Footer, Header, Main & NavArmand Philippot2023-10-2434-62/+431
| | | | | Some components have been renamed to be able to create Footer, Header and Nav.
* refactor(components): rewrite Heading componentArmand Philippot2023-10-2414-288/+180
| | | | | | | | | * remove `alignment` and `withMargin` props (consumer should handle that) * move styles to Sass placeholders to avoid repeats with headings coming from WordPress * refactor some other components that depend on Heading to avoid ESlint errors
* refactor(components): rewrite Section componentArmand Philippot2023-10-247-122/+111
| | | | | | * Make it compliant with ESlint rules * Remove mandatory heading, it now depends on the consumer * Change defaults for hasBorder and variant
* refactor(components): rewrite Button and ButtonLink componentsArmand Philippot2023-10-2414-362/+478
| | | | | | | | | | | | | | Both: * move styles to Sass placeholders Button: * add `isPressed` prop to Button * add `isLoading` prop to Button (to differentiate state from disabled) ButtonLink: * replace `external` prop with `isExternal` prop * replace `href` prop with `to` prop
* build: convert project to esmArmand Philippot2023-10-2446-0/+46
|
* refactor(components): rewrite form componentsArmand Philippot2023-10-2458-607/+1339
|
* refactor: use named export for everything except pagesArmand Philippot2023-09-20130-636/+413
| | | | | | Next expect a default export for pages so only those components should use default exports. Everything else should use named exports to reduce the number of import statements.
* build(deps): bump all dependenciesArmand Philippot2023-09-191-1/+4
| | | | | * MDX type has changed so some components props had to be updated * Since Storybook now supports TS, I renamed the main/preview files
* refactor(build): replace paths aliases with relative pathsArmand Philippot2023-09-1975-86/+84
| | | | | | Using paths aliases starting with "@" can be confusing and can lead to conflict with existings modules. I prefer to use relative paths to avoid extra configuration in tools because of these aliases.
* chore: make Links and Images compliant with Next.js 13Armand Philippot2023-01-234-20/+17
|
* chore: add a label to progress barArmand Philippot2022-06-075-47/+54
| | | | | | The progress element is a form element, so a label is required to be accessible. Since I'm not using it without label, I transform the optional info parameter to a mandatory label parameter.
* chore(cards): use post title as link labelArmand Philippot2022-06-073-0/+19
|
* chore: add aria hidden attribute to SVG iconsArmand Philippot2022-06-0724-12/+237
|
* test(unit): fix Jest errors due to images importArmand Philippot2022-06-031-0/+3
| | | | | I mocked some SVG files and moves the branding photo to public directory. It is more a workaround than a real fix but it works so...
* test: install and configure cypressArmand Philippot2022-06-0240-40/+40
| | | | I also configure Jest to avoid conflicts between Cypress and Jest.
* fix: improve help button accessibility with aria-pressedArmand Philippot2022-06-021-4/+8
|
* chore: replace the Ackee select by a toggle componentArmand Philippot2022-06-015-216/+0
|
* chore: replace the toggle componentArmand Philippot2022-06-011-2/+2
|