@digigov/ui 1.1.5-496927f3 → 1.2.0-a7ffb5dc

package/navigation/Link/__snapshots__/index.spec.tsx.snap

@@ -23,11 +23,11 @@ exports[`renders the Link 1`] = `
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-link"
+      className="ds-link"
       href=""
     >
       <a
-        className="govgr-link"
+        className="ds-link"
         href=""
       >
         hello

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "@digigov/ui",
-  "version": "1.1.5-496927f3",
+  "version": "1.2.0-a7ffb5dc",
   "description": "@digigov reusable components toolkit",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "dependencies": {
-    "google-libphonenumber": "3.2.8",
     "@uides/react-qr-reader": "3.0.0",
-    "react-query": "2.26.4",
     "yup": "0.32.11",
     "publint": "0.1.8",
-    "@digigov/react-icons": "1.2.0-496927f3",
+    "@digigov/react-icons": "1.2.0-a7ffb5dc",
     "dompurify": "3.0.6"
   },
   "peerDependencies": {
+    "react-query": "2.26.4",
     "@material-ui/core": "4.11.3",
     "@material-ui/icons": "4.11.2",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "1.2.1-496927f3",
-    "@digigov/css": "1.2.1-496927f3"
+    "@digigov/react-core": "1.3.0-a7ffb5dc",
+    "@digigov/css": "2.0.0-a7ffb5dc"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/src/app/Header/__snapshots__/index.spec.tsx.snap

@@ -4,11 +4,11 @@ exports[`renders the HeaderTitle component 1`] = `
 <ForwardRef(HeaderTitle)>
   <ForwardRef(Base)
     as="a"
-    className="govgr-header__title"
+    className="ds-header__title"
     href="/"
   >
     <a
-      className="govgr-header__title"
+      className="ds-header__title"
       href="/"
     >
       A title
@@ -23,11 +23,11 @@ exports[`renders the HeaderTitle component with custom href 1`] = `
 >
   <ForwardRef(Base)
     as="a"
-    className="govgr-header__title"
+    className="ds-header__title"
     href="/somelink"
   >
     <a
-      className="govgr-header__title"
+      className="ds-header__title"
       href="/somelink"
     >
       A title

package/src/app/hooks/useHighlightLinks.ts

@@ -19,21 +19,21 @@ export const useHighlightLinks = (): UseHighlightLinksResult => {
 
   useEffect(() => {
     if (highlightLinks === 'highlight') {
-      document.documentElement.classList.add(`govgr-highlight-links`);
+      document.documentElement.classList.add(`ds-highlight-links`);
     } else {
-      document.documentElement.classList.remove(`govgr-highlight-links`);
+      document.documentElement.classList.remove(`ds-highlight-links`);
     }
     localStorage.setItem('--theme-highlight-links', highlightLinks);
   }, [highlightLinks]);
 
   useEffect(() => {
     const beforePrintListener = () => {
-      document.documentElement.classList.remove(`govgr-highlight-links`);
+      document.documentElement.classList.remove(`ds-highlight-links`);
     };
     const afterPrintListener = () => {
       document.documentElement.classList.add(
         localStorage.getItem('--theme-highlight-links') === 'highlight'
-          ? `govgr-highlight-links`
+          ? `ds-highlight-links`
           : ''
       );
     };

package/src/content/Accordion/__snapshots__/index.spec.tsx.snap

@@ -4,19 +4,19 @@ exports[`renders the Accordion 1`] = `
 <ForwardRef(Accordion)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-accordion--border-top govgr-accordion"
+    className="ds-accordion--border-top ds-accordion"
   >
     <div
-      className="govgr-accordion--border-top govgr-accordion"
+      className="ds-accordion--border-top ds-accordion"
     >
       <withDeprecationComponent>
         <ForwardRef(AccordionSection)>
           <ForwardRef(Base)
             as="details"
-            className="govgr-accordion__section"
+            className="ds-accordion__section"
           >
             <details
-              className="govgr-accordion__section"
+              className="ds-accordion__section"
             >
               <withDeprecationComponent>
                 <Component>
@@ -24,12 +24,12 @@ exports[`renders the Accordion 1`] = `
                     <ForwardRef(Base)
                       aria-level={2}
                       as="summary"
-                      className="govgr-accordion__section-summary"
+                      className="ds-accordion__section-summary"
                       role="heading"
                     >
                       <summary
                         aria-level={2}
-                        className="govgr-accordion__section-summary"
+                        className="ds-accordion__section-summary"
                         role="heading"
                       >
                         <ForwardRef(AccordionSectionSummaryHeading)
@@ -39,18 +39,18 @@ exports[`renders the Accordion 1`] = `
                           <ForwardRef(Base)
                             aria-expanded={false}
                             as="h2"
-                            className="govgr-accordion__section-heading"
+                            className="ds-accordion__section-heading"
                             onClick={[Function]}
                             role="button"
                           >
                             <h2
                               aria-expanded={false}
-                              className="govgr-accordion__section-heading"
+                              className="ds-accordion__section-heading"
                               onClick={[Function]}
                               role="button"
                             >
                               <span
-                                className="govgr-accordion__section-button"
+                                className="ds-accordion__section-button"
                               >
                                 Βασικες Ρυθμισεις
                               </span>
@@ -66,10 +66,10 @@ exports[`renders the Accordion 1`] = `
                 <ForwardRef(AccordionSectionContent)>
                   <ForwardRef(Base)
                     as="div"
-                    className="govgr-accordion__section-content"
+                    className="ds-accordion__section-content"
                   >
                     <div
-                      className="govgr-accordion__section-content"
+                      className="ds-accordion__section-content"
                     >
                       Περιεχομενο Βασικων Ρυθμισεων
                     </div>
@@ -84,10 +84,10 @@ exports[`renders the Accordion 1`] = `
         <ForwardRef(AccordionSection)>
           <ForwardRef(Base)
             as="details"
-            className="govgr-accordion__section"
+            className="ds-accordion__section"
           >
             <details
-              className="govgr-accordion__section"
+              className="ds-accordion__section"
             >
               <withDeprecationComponent>
                 <Component>
@@ -95,12 +95,12 @@ exports[`renders the Accordion 1`] = `
                     <ForwardRef(Base)
                       aria-level={2}
                       as="summary"
-                      className="govgr-accordion__section-summary"
+                      className="ds-accordion__section-summary"
                       role="heading"
                     >
                       <summary
                         aria-level={2}
-                        className="govgr-accordion__section-summary"
+                        className="ds-accordion__section-summary"
                         role="heading"
                       >
                         <ForwardRef(AccordionSectionSummaryHeading)
@@ -110,18 +110,18 @@ exports[`renders the Accordion 1`] = `
                           <ForwardRef(Base)
                             aria-expanded={false}
                             as="h2"
-                            className="govgr-accordion__section-heading"
+                            className="ds-accordion__section-heading"
                             onClick={[Function]}
                             role="button"
                           >
                             <h2
                               aria-expanded={false}
-                              className="govgr-accordion__section-heading"
+                              className="ds-accordion__section-heading"
                               onClick={[Function]}
                               role="button"
                             >
                               <span
-                                className="govgr-accordion__section-button"
+                                className="ds-accordion__section-button"
                               >
                                 Υπολοιπες Ρυθμισεις
                               </span>
@@ -137,10 +137,10 @@ exports[`renders the Accordion 1`] = `
                 <ForwardRef(AccordionSectionContent)>
                   <ForwardRef(Base)
                     as="div"
-                    className="govgr-accordion__section-content"
+                    className="ds-accordion__section-content"
                   >
                     <div
-                      className="govgr-accordion__section-content"
+                      className="ds-accordion__section-content"
                     >
                       Περιεχομενο Υπολοιπων Ρυθμισεων
                     </div>

package/src/content/Blockquote/__snapshots__/index.spec.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the Blockquote with sample data 1`] = `
 <ForwardRef(Blockquote)>
   <ForwardRef(Base)
     as="blockquote"
-    className="govgr-blockquote"
+    className="ds-blockquote"
   >
     <blockquote
-      className="govgr-blockquote"
+      className="ds-blockquote"
     >
       this is some random data
     </blockquote>

package/src/content/Details/__snapshots__/index.spec.tsx.snap

@@ -4,18 +4,18 @@ exports[`renders the closed Details component 1`] = `
 <ForwardRef(Details)>
   <ForwardRef(Base)
     as="details"
-    className="govgr-details"
+    className="ds-details"
   >
     <details
-      className="govgr-details"
+      className="ds-details"
     >
       <ForwardRef(DetailsSummary)>
         <ForwardRef(Base)
           as="summary"
-          className="govgr-details__summary"
+          className="ds-details__summary"
         >
           <summary
-            className="govgr-details__summary"
+            className="ds-details__summary"
           >
             Help with nationality
           </summary>
@@ -24,10 +24,10 @@ exports[`renders the closed Details component 1`] = `
       <ForwardRef(DetailsContent)>
         <ForwardRef(Base)
           as="div"
-          className="govgr-details__content"
+          className="ds-details__content"
         >
           <div
-            className="govgr-details__content"
+            className="ds-details__content"
           >
             We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
           </div>
@@ -44,20 +44,20 @@ exports[`renders the open Details component 1`] = `
 >
   <ForwardRef(Base)
     as="details"
-    className="govgr-details"
+    className="ds-details"
     open={true}
   >
     <details
-      className="govgr-details"
+      className="ds-details"
       open={true}
     >
       <ForwardRef(DetailsSummary)>
         <ForwardRef(Base)
           as="summary"
-          className="govgr-details__summary"
+          className="ds-details__summary"
         >
           <summary
-            className="govgr-details__summary"
+            className="ds-details__summary"
           >
             Help with nationality
           </summary>
@@ -66,10 +66,10 @@ exports[`renders the open Details component 1`] = `
       <ForwardRef(DetailsContent)>
         <ForwardRef(Base)
           as="div"
-          className="govgr-details__content"
+          className="ds-details__content"
         >
           <div
-            className="govgr-details__content"
+            className="ds-details__content"
           >
             We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
           </div>

package/src/content/SafeHTML/index.tsx

@@ -15,14 +15,14 @@ const defaultTags = [
 ];
 
 const elementClassNameMapping = {
-  a: 'govgr-link',
-  p: 'govgr-body',
-  b: 'govgr-bold',
-  strong: 'govgr-bold',
-  sub: 'govgr-sub',
-  ul: 'govgr-list govgr-list--bullet',
-  ol: 'govgr-list govgr-list--number',
-  li: 'govgr-list__item',
+  a: 'ds-link',
+  p: 'ds-body',
+  b: 'ds-bold',
+  strong: 'ds-bold',
+  sub: 'ds-sub',
+  ul: 'ds-list ds-list--bullet',
+  ol: 'ds-list ds-list--number',
+  li: 'ds-list__item',
 };
 
 if (typeof window !== 'undefined') {
@@ -62,7 +62,7 @@ export const getClosingTags = (htmlString) => {
   return stack;
 };
 
-interface SafeHTMLProps {
+export interface SafeHTMLProps {
   content: string;
   tags?: Array<string>;
   Tag?: string;
@@ -90,7 +90,7 @@ export const SafeHTML = ({
     <Tag
       // @ts-ignore
       style={{ whiteSpace: 'break-spaces', ...style }}
-      className="govgr-body"
+      className="ds-body"
       dangerouslySetInnerHTML={{
         __html: parsedHTML,
       }}

package/src/content/SummaryList/__snapshots__/index.spec.tsx.snap

@@ -4,26 +4,26 @@ exports[`renders the SummaryList with sample data 1`] = `
 <ForwardRef(SummaryList)>
   <ForwardRef(Base)
     as="dl"
-    className="govgr-summary-list"
+    className="ds-summary-list"
   >
     <dl
-      className="govgr-summary-list"
+      className="ds-summary-list"
     >
       <ForwardRef(SummaryListItem)>
         <ForwardRef(Base)
           as="div"
-          className="govgr-summary-list__row"
+          className="ds-summary-list__row"
         >
           <div
-            className="govgr-summary-list__row"
+            className="ds-summary-list__row"
           >
             <ForwardRef(SummaryListItemKey)>
               <ForwardRef(Base)
                 as="dt"
-                className="govgr-summary-list__key"
+                className="ds-summary-list__key"
               >
                 <dt
-                  className="govgr-summary-list__key"
+                  className="ds-summary-list__key"
                 >
                   Όνομα
                 </dt>
@@ -32,10 +32,10 @@ exports[`renders the SummaryList with sample data 1`] = `
             <ForwardRef(SummaryListItemValue)>
               <ForwardRef(Base)
                 as="dd"
-                className="govgr-summary-list__value"
+                className="ds-summary-list__value"
               >
                 <dd
-                  className="govgr-summary-list__value"
+                  className="ds-summary-list__value"
                 >
                    Μάριος
                 </dd>
@@ -44,10 +44,10 @@ exports[`renders the SummaryList with sample data 1`] = `
             <ForwardRef(SummaryListItemAction)>
               <ForwardRef(Base)
                 as="dd"
-                className="govgr-summary-list__actions"
+                className="ds-summary-list__actions"
               >
                 <dd
-                  className="govgr-summary-list__actions"
+                  className="ds-summary-list__actions"
                 >
                    Αλλαγή
                 </dd>
@@ -59,18 +59,18 @@ exports[`renders the SummaryList with sample data 1`] = `
       <ForwardRef(SummaryListItem)>
         <ForwardRef(Base)
           as="div"
-          className="govgr-summary-list__row"
+          className="ds-summary-list__row"
         >
           <div
-            className="govgr-summary-list__row"
+            className="ds-summary-list__row"
           >
             <ForwardRef(SummaryListItemKey)>
               <ForwardRef(Base)
                 as="dt"
-                className="govgr-summary-list__key"
+                className="ds-summary-list__key"
               >
                 <dt
-                  className="govgr-summary-list__key"
+                  className="ds-summary-list__key"
                 >
                   Επώνυμο
                 </dt>
@@ -79,10 +79,10 @@ exports[`renders the SummaryList with sample data 1`] = `
             <ForwardRef(SummaryListItemValue)>
               <ForwardRef(Base)
                 as="dd"
-                className="govgr-summary-list__value"
+                className="ds-summary-list__value"
               >
                 <dd
-                  className="govgr-summary-list__value"
+                  className="ds-summary-list__value"
                 >
                   Μενεξές
                 </dd>

package/src/form/AutoComplete/index.tsx

@@ -63,7 +63,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     defaultValue: '',
     displayMenu: 'overlay',
     minLength: 0,
-    name: 'govgr-input-autocomplete',
+    name: 'ds-input-autocomplete',
     placeholder: '',
     onConfirm: (): void => {
       return;
@@ -503,7 +503,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       queryNotEmpty &&
       queryLongEnough;
     const componentIsFocused = focused !== null;
-    const dropdownArrowClassName = `govgr-autocomplete__dropdown-arrow-down`;
+    const dropdownArrowClassName = `ds-autocomplete__dropdown-arrow-down`;
     const optionFocused = focused !== -1 && focused !== null;
     const menuIsVisible = menuOpen || showNoOptionsFound;
     const selectedOptionText = this.templateInputValue(options[selected]);
@@ -518,8 +518,8 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     const assistiveHintID = id + '__assistiveHint';
     const ariaDescribedProp = ariaHint
       ? {
-          'aria-describedby': assistiveHintID,
-        }
+        'aria-describedby': assistiveHintID,
+      }
       : null;
 
     return (

package/src/form/Button/__snapshots__/index.spec.tsx.snap

@@ -4,11 +4,11 @@ exports[`renders the button 1`] = `
 <ForwardRef(Button)>
   <ForwardRef(Base)
     as="button"
-    className="govgr-btn-primary govgr-btn"
+    className="ds-btn-primary ds-btn"
     printHidden={true}
   >
     <button
-      className="govgr-btn-primary govgr-btn govgr-print-hidden"
+      className="ds-btn-primary ds-btn ds-print-hidden"
     >
       hello
     </button>

package/src/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -5,18 +5,18 @@ children  1`] = `
 <ForwardRef(Layout)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-layout--full-height govgr-layout"
+    className="ds-layout--full-height ds-layout"
   >
     <div
-      className="govgr-layout--full-height govgr-layout"
+      className="ds-layout--full-height ds-layout"
     >
       <ForwardRef(Top)>
         <ForwardRef(Base)
           as="div"
-          className="govgr-top"
+          className="ds-top"
         >
           <div
-            className="govgr-top"
+            className="ds-top"
           >
             Header content
           </div>
@@ -25,7 +25,7 @@ children  1`] = `
       <withDeprecationComponent>
         <ForwardRef(Container)>
           <ForwardRef(Grid)
-            className="govgr-container"
+            className="ds-container"
             container={true}
             spacing={
               Object {
@@ -35,15 +35,15 @@ children  1`] = `
           >
             <ForwardRef(Base)
               as="div"
-              className="govgr-container govgr-gap-sm-12 govgr-grid"
+              className="ds-container ds-gap-sm-12 ds-grid"
             >
               <div
-                className="govgr-container govgr-gap-sm-12 govgr-grid"
+                className="ds-container ds-gap-sm-12 ds-grid"
               >
                 <ForwardRef(Main)>
                   <ForwardRef(Grid)
                     as="main"
-                    className="govgr-main"
+                    className="ds-main"
                     id="main-content"
                     item={true}
                     md={8}
@@ -51,11 +51,11 @@ children  1`] = `
                   >
                     <ForwardRef(Base)
                       as="main"
-                      className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
+                      className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
                       id="main-content"
                     >
                       <main
-                        className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
+                        className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
                         id="main-content"
                       >
                         Main content
@@ -67,7 +67,7 @@ children  1`] = `
                   <ForwardRef(Aside)>
                     <ForwardRef(Grid)
                       as="aside"
-                      className="govgr-aside"
+                      className="ds-aside"
                       item={true}
                       md={4}
                       spacing={4}
@@ -75,10 +75,10 @@ children  1`] = `
                     >
                       <ForwardRef(Base)
                         as="aside"
-                        className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
+                        className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
                       >
                         <aside
-                          className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
+                          className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
                         >
                           Side content
                         </aside>
@@ -94,10 +94,10 @@ children  1`] = `
       <ForwardRef(Bottom)>
         <ForwardRef(Base)
           as="div"
-          className="govgr-bottom"
+          className="ds-bottom"
         >
           <div
-            className="govgr-bottom"
+            className="ds-bottom"
           >
             Bottom content
           </div>

package/src/layouts/Screen/Screen.stories.js

@@ -6,4 +6,5 @@ export default {
 };
 export * from '@digigov/ui/layouts/Screen/__stories__/Default';
 export * from '@digigov/ui/layouts/Screen/__stories__/SpecificScreenSize';
-export * from '@digigov/ui/layouts/Screen/__stories__/ScreenDown';
+export * from '@digigov/ui/layouts/Screen/__stories__/ScreenDown';
+export * from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';

package/src/layouts/Screen/__stories__/ScreenUp.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Screen } from '@digigov/ui/layouts/Screen';
+
+export const ScreenUp = () => {
+  return (
+    <Screen size='mdUp'>
+      <div>This is a mdUp screen</div>
+    </Screen>
+  );
+};
+export default ScreenUp;