@eturnity/eturnity_reusable_components 1.1.39 → 1.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.39",
+  "version": "1.1.40",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -44,6 +44,8 @@
         :value="inputValue"
         @input-change="onInputChange($event)"
       />
+      <br />
+      <page-subtitle text="My Subtitle" infoText="My info Text" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -56,6 +58,7 @@ import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
 import Toggle from "@/components/inputs/toggle"
 import InputNumber from "@/components/inputs/inputNumber"
+import PageSubtitle from "@/components/pageSubtitle"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -71,6 +74,7 @@ export default {
     ThreeDots,
     Toggle,
     InputNumber,
+    PageSubtitle,
     // TableDropdown,
   },
   data() {

package/src/components/infoText/index.vue

@@ -38,7 +38,7 @@
 <script>
 // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
 //To use:
-// <info-component
+// <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
 //     borderColor="#ccc"
 //     size="20"

package/src/components/pageSubtitle/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <subtitle-text :color="color">{{ text }}</subtitle-text>
+  <subtitle-text :color="color" :hasInfoText="!!infoText">
+    <span>
+      {{ text }}
+    </span>
+    <info-text :text="infoText" v-if="!!infoText" borderColor="#ccc" />
+  </subtitle-text>
 </template>
 
 <script>
@@ -8,21 +13,29 @@
 // <page-subtitle
 //   text="My Page Subitle"
 //   color="red"
+//   infoText="My info text"
 // />
 import styled from "vue-styled-components"
+import InfoText from "../infoText"
 
-const textAttrs = { color: String }
+const textAttrs = { color: String, hasInfoText: Boolean }
 const SubtitleText = styled("div", textAttrs)`
+  display: grid;
+  grid-gap: 12px;
+  grid-template-columns: ${(props) =>
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
   margin-bottom: 30px;
   line-height: 1.5;
+  position: relative;
 `
 
 export default {
   name: "page-subtitle",
   components: {
     SubtitleText,
+    InfoText,
   },
   props: {
     text: {
@@ -31,6 +44,10 @@ export default {
     color: {
       required: false,
     },
+    infoText: {
+      required: false,
+      default: null,
+    },
   },
 }
 </script>