feat(copyright): Add copyright prefix - Image - refs #250724

eea · Mar 27, 2023 · 6a72772 · 6a72772
1 parent a647311
commit 6a72772
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 12 deletions.
diff --git a/src/ui/Banner/Banner.stories.jsx b/src/ui/Banner/Banner.stories.jsx
@@ -52,6 +52,13 @@ export default {
         type: { summary: 'string' },
       },
     },
+    copyrightPrefix: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '' },
+        type: { summary: 'string' },
+      },
+    },
     copyrightIcon: {
       table: {
         category: 'Copyright',
@@ -60,7 +67,6 @@ export default {
       },
     },
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -141,6 +147,7 @@ const Template = (args) => {
           </Banner.Metadata>
         )}
         <Copyright copyrightPosition={args.copyrightPosition}>
+          <Copyright.Prefix>{args.copyrightPrefix}</Copyright.Prefix>
           <Copyright.Icon>
             <Icon className={args.copyrightIcon} />
           </Copyright.Icon>
@@ -164,7 +171,8 @@ Default.args = {
   image: true,
   hideShareButton: false,
   hideDownloadButton: false,
+  copyrightPrefix: 'Image',
   copyrightPosition: 'left',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };
diff --git a/src/ui/Copyright/Copyright.jsx b/src/ui/Copyright/Copyright.jsx
@@ -13,6 +13,15 @@ function Copyright({ children, ...rest }) {
   );
 }
 
+Copyright.Prefix = ({ children, ...rest }) =>
+  children ? (
+    <span {...rest} className={'icon-prefix'}>
+      {children}
+    </span>
+  ) : (
+    ''
+  );
+
 Copyright.Icon = ({ children, ...rest }) => (
   <span {...rest} className={'icon-wrapper'}>
     {children}

diff --git a/src/ui/Copyright/Copyright.stories.jsx b/src/ui/Copyright/Copyright.stories.jsx
@@ -7,7 +7,6 @@ export default {
   component: Copyright,
   argTypes: {
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -24,17 +23,19 @@ export const Default = (args) => (
   <Container>
     <Segment className={'inverted'}>
       <Copyright copyrightPosition={args.copyrightPosition}>
+        <Copyright.Prefix>{args.copyrightPrefix}</Copyright.Prefix>
         <Copyright.Icon>
-          <Icon className={args.icon} />
+          <Icon className={args.copyrightIcon} />
         </Copyright.Icon>
-        <Copyright.Text>{args.text}</Copyright.Text>
+        <Copyright.Text>{args.copyright}</Copyright.Text>
       </Copyright>
     </Segment>
   </Container>
 );
 
 Default.args = {
   copyrightPosition: 'left',
-  icon: 'ri-copyright-line',
-  text: 'Image copyright: Velit fusce sed sem ut.',
+  copyrightPrefix: 'Image',
+  copyrightIcon: 'ri-copyright-line',
+  copyright: 'John Smith, Well with Nature /EEA',
 };
diff --git a/src/ui/Hero/Hero.jsx b/src/ui/Hero/Hero.jsx
@@ -24,9 +24,9 @@ function Hero({
   alignContent,
   backgroundVariant,
   children,
-
   has_copyright,
   copyright,
+  copyrightPrefix,
   copyrightIcon,
   copyrightPosition,
 }) {
@@ -49,6 +49,7 @@ function Hero({
 
             {has_copyright && (
               <Copyright copyrightPosition={copyrightPosition}>
+                <Copyright.Prefix>{copyrightPrefix}</Copyright.Prefix>
                 <Copyright.Icon>
                   <Icon className={copyrightIcon} />
                 </Copyright.Icon>

diff --git a/src/ui/Hero/Hero.stories.jsx b/src/ui/Hero/Hero.stories.jsx
@@ -63,7 +63,6 @@ export default {
       },
     },
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -74,6 +73,13 @@ export default {
         defaultValue: { summary: '"left"' },
       },
     },
+    copyrightPrefix: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
     copyrightIcon: {
       table: {
         category: 'Copyright',
@@ -130,8 +136,9 @@ Default.args = {
 
   has_copyright: true,
   copyrightPosition: 'left',
+  copyrightPrefix: 'Image',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };
 Default.parameters = {
   controls: {
@@ -167,8 +174,9 @@ Playground.args = {
 
   has_copyright: true,
   copyrightPosition: 'left',
+  copyrightPrefix: 'Image',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };
 Playground.argTypes = {
   fullWidth: {
@@ -253,6 +261,13 @@ Playground.argTypes = {
       type: { summary: 'string' },
     },
   },
+  copyrightPrefix: {
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '""' },
+      type: { summary: 'string' },
+    },
+  },
   copyrightIcon: {
     table: {
       category: 'Copyright',

diff --git a/theme/themes/eea/extras/copyright.variables b/theme/themes/eea/extras/copyright.variables
@@ -13,7 +13,7 @@
 @copyrightWrapperPaddingRight: @rem-space-3;
 @copyrightWrapperBottom: @rem-space-4;
 @copyrightMinHeight: @rem-space-8;
-@copyrightAlignItems: center;
+@copyrightAlignItems: start;
 
 /* Image block */
 @floatImageLeftMaxWidth: 50%;