hp-design-system 1.0.1 → 1.0.2

package/src/components/icons/iconList/IconList.vue

@@ -0,0 +1,172 @@
+<template>
+  <div :class="{ dark: isDarkMode }">
+    <h1>A - Brands</h1>
+
+    <h3>AA - Social Media</h3>
+    <IconListButton
+      :icons="socialMediaIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>AB - Communication</h3>
+    <IconListButton
+      :icons="communicationIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>AC - Tech</h3>
+    <IconListButton
+      :icons="techIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>AD - Development</h3>
+    <IconListButton
+      :icons="developmentIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>AE - Others</h3>
+    <IconListButton
+      :icons="otherBrandIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h1>B - Digital</h1>
+
+    <h3>BA - Menu</h3>
+    <IconListButton
+      :icons="menuIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>BB - Arrow</h3>
+    <IconListButton
+      :icons="arrowIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>BC - User</h3>
+    <IconListButton
+      :icons="userIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>BD - Tool</h3>
+    <IconListButton
+      :icons="toolsIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>BE - Symbol</h3>
+    <IconListButton
+      :icons="symbolsIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>BF - Action</h3>
+    <IconListButton
+      :icons="actionsIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h3>BG - Others</h3>
+    <IconListButton
+      :icons="otherDigitalIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <h1>D - Places</h1>
+    <IconListButton
+      :icons="placeIcons"
+      :color="color"
+      :is-dark-mode="isDarkMode"
+    />
+
+    <!-- <h1>C - Objects</h1> -->
+    <!-- <h1>E - Company</h1> -->
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import IconListButton from './components/IconListButton.vue'
+import AllIcons from '../../../../public/assets/icons/icons.json'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#757abf'
+  }
+})
+
+const isDarkMode = computed(() => {
+  const element = document.getElementsByClassName('docs-story')[0]
+  const backgroundColor = window.getComputedStyle(element).backgroundColor
+  return backgroundColor === 'rgb(51, 51, 51)'
+})
+
+const socialMediaIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('AA')).sort()
+)
+const communicationIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('AB')).sort()
+)
+const techIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('AC')).sort()
+)
+const developmentIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('AD')).sort()
+)
+const otherBrandIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('AE')).sort()
+)
+const menuIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('BA')).sort()
+)
+const arrowIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('BB')).sort()
+)
+const userIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('BC')).sort()
+)
+const toolsIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('BD')).sort()
+)
+const symbolsIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('BE')).sort()
+)
+const actionsIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('BF')).sort()
+)
+const otherDigitalIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('BG')).sort()
+)
+const placeIcons = computed(() =>
+  AllIcons.filter((name) => name.startsWith('C')).sort()
+)
+</script>
+
+<style lang="scss" scoped>
+.dark h1,
+.dark h3 {
+  color: white;
+}
+
+h1,
+h3 {
+  color: black;
+}
+</style>

package/src/components/icons/iconList/components/IconListButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <div style="display: flex; flex-wrap: wrap; gap: 16px">
+    <div v-for="(icon, id) in icons" :key="id" style="text-align: center">
+      <div
+        style="margin-top: 8px; display: flex; align-items: center; gap: 8px"
+      >
+        <button @click="copyToClipboard(icon)" class="icon-button">
+          <Icon :name="icon" size="lg" :color="color" />
+          <span :class="{ 'label-white': isDarkMode }">{{ icon }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Icon from '../../Icon/Icon.vue'
+
+defineProps({
+  isDarkMode: {
+    type: Boolean,
+    required: true
+  },
+  icons: {
+    type: Array<string>,
+    required: true
+  },
+  color: {
+    type: String,
+    required: true
+  }
+})
+
+const copyToClipboard = (text: string) => {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      alert('Ícone copiado!')
+    })
+    .catch((error) => {
+      console.error('Failed to copy text: ', error)
+    })
+}
+</script>
+
+<style scoped>
+.icon-button {
+  width: 100px;
+  display: flex;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  transition: transform 0.2s ease-in-out;
+}
+
+.icon-button:hover {
+  transform: scale(1.1);
+}
+
+span {
+  font-family: 'Quicksand';
+  font-weight: 600;
+}
+
+.label-white {
+  color: white;
+}
+</style>

package/src/components/index.ts

@@ -1,3 +1,6 @@
 import HpButton from './button/Button.vue'
+import HpCheckbox from './inputs/checkbox/Checkbox.vue'
+import HpIcon from './icons//Icon/Icon.vue'
+import HpTeste from './teste/Teste.vue'
 
-export { HpButton }
+export { HpButton, HpCheckbox, HpIcon, HpTeste }

package/src/components/inputs/checkbox/Checkbox.scss

@@ -0,0 +1,91 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.checkbox .check {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+}
+.checkbox .check span {
+  display: inline-block;
+  vertical-align: middle;
+  transform: translate3d(0, 0, 0);
+}
+.checkbox .check span:first-child {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  transform: scale(1);
+  vertical-align: middle;
+  border: 1px solid rgb(255 255 255 / 10%);
+  transition: all 0.2s ease;
+}
+.checkbox .check span:first-child svg {
+  position: absolute;
+  z-index: 1;
+  top: 8px;
+  left: 6px;
+  fill: none;
+  stroke: var(--check-color, #f9f9f9);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 16px;
+  stroke-dashoffset: 16px;
+  transition: all 0.3s ease;
+  transition-delay: 0.1s;
+  transform: translate3d(0, 0, 0);
+}
+.checkbox .check span:first-child:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: var(--background-color, #8f44fd);
+  display: block;
+  transform: scale(0);
+  opacity: 1;
+  border-radius: 50%;
+  transition-delay: 0.2s;
+}
+.checkbox .check:hover span:first-child {
+  border-color: var(--border-color, #8f44fd);
+}
+.checkbox .input:checked + .check span:first-child {
+  border-color: var(--border-color, #8f44fd);
+  background: var(--background-color, #8f44fd);
+  animation: check 0.6s ease;
+}
+.checkbox .input:checked + .check span:first-child svg {
+  stroke-dashoffset: 0;
+}
+.checkbox .input:checked + .check span:first-child:before {
+  transform: scale(2.2);
+  opacity: 0;
+  transition: all 0.6s ease;
+}
+.checkbox .input:checked + .check span:last-child {
+  color: rgb(255 255 255 / 10%);
+  transition: all 0.3s ease;
+}
+.checkbox .input:checked + .check span:last-child:after {
+  transform: scaleX(1);
+  transition: all 0.3s ease;
+}
+
+@keyframes check {
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+.checkbox-label {
+  display: inline-block;
+  margin-left: 8px; // Ajuste conforme necessário
+  color: var(--check-color, #f9f9f9);
+  font-size: 14px; // Ajuste conforme necessário
+}

package/src/components/inputs/checkbox/Checkbox.stories.ts

@@ -0,0 +1,100 @@
+import type { Meta, StoryFn } from '@storybook/vue3'
+import HpCheckbox from './Checkbox.vue'
+
+const meta: Meta = {
+  title: 'Componentes/Checkbox',
+  component: HpCheckbox,
+  argTypes: {
+    checked: {
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        category: 'Propriedades',
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: 'false' }
+      },
+      description: 'Define se o checkbox está marcado'
+    },
+    label: {
+      control: {
+        type: 'text'
+      },
+      table: {
+        category: 'Propriedades',
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: '' }
+      },
+      description: 'Texto da label ao lado do checkbox'
+    },
+    backgroundColor: {
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Propriedades',
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: '#8f44fd' }
+      },
+      description: 'Cor de fundo do checkbox quando marcado'
+    },
+    checkColor: {
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Propriedades',
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: '#f9f9f9' }
+      },
+      description: 'Cor do check no checkbox'
+    },
+    borderColor: {
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Propriedades',
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: '#8f44fd' }
+      },
+      description: 'Cor da borda do checkbox'
+    }
+  }
+}
+
+export default meta
+
+const Template: StoryFn<{
+  checked: boolean
+  label: string
+  backgroundColor: string
+  checkColor: string
+  borderColor: string
+}> = (args) => ({
+  components: { HpCheckbox },
+  setup() {
+    return { args }
+  },
+  template:
+    '<HpCheckbox :checked="args.checked" :label="args.label" :backgroundColor="args.backgroundColor" :checkColor="args.checkColor" :borderColor="args.borderColor" />'
+})
+
+export const Example = Template.bind({})
+Example.args = {
+  checked: false,
+  label: 'Label do Checkbox',
+  backgroundColor: '#8f44fd',
+  checkColor: '#f9f9f9',
+  borderColor: '#8f44fd'
+}

package/src/components/inputs/checkbox/Checkbox.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="checkbox"
+    :style="{
+      '--background-color': backgroundColor || '#8f44fd',
+      '--border-color': borderColor || '#8f44fd',
+      '--check-color': checkColor || '#f9f9f9'
+    }"
+  >
+    <input
+      class="input"
+      id="check"
+      :checked="checked"
+      type="checkbox"
+      style="display: none"
+    />
+    <label class="check" for="check">
+      <span>
+        <svg width="12px" height="9px" viewbox="0 0 12 9">
+          <polyline points="1 5 4 8 11 1"></polyline>
+        </svg>
+      </span>
+    </label>
+    <span class="checkbox-label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  checked: {
+    type: Boolean,
+    required: false
+  },
+  label: {
+    type: String,
+    required: false
+  },
+  backgroundColor: {
+    type: String,
+    required: false
+  },
+  checkColor: {
+    type: String,
+    required: false
+  },
+  borderColor: {
+    type: String,
+    required: false
+  }
+})
+</script>
+
+<style lang="scss" scoped src="./Checkbox.scss" />

package/src/components/teste/Teste.stories.ts

@@ -0,0 +1,214 @@
+import type { Meta, StoryFn } from '@storybook/vue3'
+import Teste from './Teste.vue'
+
+const meta: Meta = {
+  title: 'Example/Teste',
+  component: Teste,
+  argTypes: {
+    textProp: {
+      control: 'text',
+      description: 'Texto exibido no componente',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
+    },
+    booleanProp: {
+      control: 'boolean',
+      description: 'Valor booleano para o componente',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' }
+      }
+    },
+    numberProp: {
+      control: 'number',
+      description: 'Valor numérico para o componente',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' }
+      }
+    },
+    rangeProp: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Valor dentro do intervalo definido',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' }
+      }
+    },
+    radioProp: {
+      control: 'radio',
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      description: 'Opção selecionada',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Option 1' }
+      }
+    },
+    inlineRadioProp: {
+      control: 'inline-radio',
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      description: 'Opção selecionada em linha',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Option 1' }
+      }
+    },
+    checkProp: {
+      control: 'check',
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      description: 'Opções selecionadas',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string[]' },
+        defaultValue: { summary: '[]' }
+      }
+    },
+    inlineCheckProp: {
+      control: 'inline-check',
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      description: 'Opções selecionadas em linha',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string[]' },
+        defaultValue: { summary: '[]' }
+      }
+    },
+    selectProp: {
+      control: 'select',
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      description: 'Opção selecionada',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Option 1' }
+      }
+    },
+    multiSelectProp: {
+      control: 'multi-select',
+      options: ['Option 1', 'Option 2', 'Option 3'],
+      description: 'Opções selecionadas',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string[]' },
+        defaultValue: { summary: '[]' }
+      }
+    },
+    objectProp: {
+      control: 'object',
+      description: 'Objeto para o componente',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'object' },
+        defaultValue: { summary: '{}' }
+      }
+    },
+    arrayProp: {
+      control: 'object',
+      description: 'Array para o componente',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'array' },
+        defaultValue: { summary: '[]' }
+      }
+    },
+    colorProp: {
+      control: 'color',
+      description: 'Cor em formato hexadecimal, rgb ou nome da cor',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string' },
+        defaultValue: { summary: '#000000' }
+      }
+    },
+    dateProp: {
+      control: 'date',
+      description: 'Data no formato ISO',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'string' },
+        defaultValue: { summary: new Date().toISOString().substr(0, 10) }
+      }
+    },
+    fileProp: {
+      control: 'file',
+      description: 'Arquivo selecionado',
+      table: {
+        category: 'Propriedades',
+        type: { summary: 'File' },
+        defaultValue: { summary: 'null' }
+      }
+    }
+  }
+}
+
+export default meta
+
+const Template: StoryFn<{
+  textProp: string
+  booleanProp: boolean
+  numberProp: number
+  rangeProp: number
+  radioProp: string
+  inlineRadioProp: string
+  checkProp: string[]
+  inlineCheckProp: string[]
+  selectProp: string
+  multiSelectProp: string[]
+  objectProp: Record<string, any>
+  arrayProp: any[]
+  colorProp: string
+  dateProp: string
+  fileProp: File | null
+}> = (args) => ({
+  components: { Teste },
+  setup() {
+    return { args }
+  },
+  template: '<Teste v-bind="args" />'
+})
+
+export const Primary = Template.bind({})
+Primary.args = {
+  textProp: 'Hello Storybook',
+  booleanProp: true,
+  numberProp: 42,
+  rangeProp: 50,
+  radioProp: 'Option 1',
+  inlineRadioProp: 'Option 1',
+  checkProp: ['Option 1', 'Option 3'],
+  inlineCheckProp: ['Option 1', 'Option 3'],
+  selectProp: 'Option 2',
+  multiSelectProp: ['Option 1', 'Option 2'],
+  objectProp: { key1: 'value1', key2: 'value2' },
+  arrayProp: ['Item 1', 'Item 2'],
+  colorProp: '#ff00ff',
+  dateProp: new Date().toISOString().substr(0, 10),
+  fileProp: null
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  textProp: 'Secondary Story',
+  booleanProp: false,
+  numberProp: 24,
+  rangeProp: 25,
+  radioProp: 'Option 2',
+  inlineRadioProp: 'Option 2',
+  checkProp: ['Option 2'],
+  inlineCheckProp: ['Option 2'],
+  selectProp: 'Option 1',
+  multiSelectProp: ['Option 2', 'Option 3'],
+  objectProp: { keyA: 'valueA', keyB: 'valueB' },
+  arrayProp: ['Item A', 'Item B'],
+  colorProp: '#00ff00',
+  dateProp: new Date().toISOString().substr(0, 10),
+  fileProp: null
+}